<html>
<head>
    <meta charset="utf-8">
    <title>关于我们</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/about.css">
    <link rel="stylesheet" href="css/layui.css">
    <style>[v-cloak]{display: none;}</style>
</head>
<body>
<div id="app" v-cloak>
    <div class="err_box layui-container" id="errBox" v-show="tipsIf" :style="{top:errorTop+'px'}">{{tipsMsg}}</div>
    <xhhead on="0" v-on:login="loginMsgPop"></xhhead>
    <Login v-show="login_if" :login_type="login_num" v-on:close="login_close" v-on:tip="son_tip"  ></Login>
    <div class="about">
        <div class="layui-container disFlex box_shadow no_pad">
            <nav class="nav_box">
                <div class="nav">
                    <ul>
                        <li :class="{foot_head:true,on:orderOn==0}" @click="headClick('aboutList')">关于我们 <span class="icon"></span></li>
                        <li :class="{on:a.on==1}" v-for="(a,i) in aboutList" @click="navBtn('aboutList',i)">{{a.item}}</li>
                    </ul>
                    <ul>
                        <li :class="{foot_head:true,on:orderOn==1}" @click="headClick('shopList')">购物指南 <span class="icon"></span></li>
                        <li :class="{on:a.on==1}" v-for="(a,i) in shopList" @click="navBtn('shopList',i)">{{a.item}}</li>
                    </ul>
                    <ul>
                        <li :class="{foot_head:true,on:orderOn==2}" @click="headClick('serverList')">服务保障 <span class="icon"></span></li>
                        <li :class="{on:a.on==1}" v-for="(a,i) in serverList" @click="navBtn('serverList',i)">{{a.item}}</li>
                    </ul>
                    <ul>
                        <li :class="{foot_head:true,on:orderOn==3}" @click="headClick('userList')">客服中心 <span class="icon"></span></li>
                        <li :class="{on:a.on==1}" v-for="(a,i) in userList" @click="navBtn('userList',i)">{{a.item}}</li>
                    </ul>
                </div>
            </nav>
            <div class="container">
                <div class="title">关于我们</div>
                <div class="content">
                    挑号网 (原挑卡网)隶属于北京飞翔思拓科技有限公司 ，成立于2015年5月1日，与中国移动、中国联通、中国电信合作，并由于业绩突出，已获得“年度销售金奖”、“优秀代理商”、“优秀合作商”等多个奖励。本网站专业从事中国移动、中国联通、中国电信的在线销售和推广，目前已经开通了全国多个城市的手机靓号在线销售业务，挑号网 的目标是把手机号码网上选号营业厅的服务范围覆盖到全国每个角落。
                </div>
            </div>
        </div>

    </div>
    <xhfooter></xhfooter>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="foot.js"></script>
<script src="js/components.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            aboutList:[{item:"关于我们",on:1},{item:"发展历程",on:0},{item:"商务合作",on:0}],
            shopList:[{item:"套餐导购",on:0},{item:"选好流程",on:0},{item:"用户协议",on:0}],
            serverList:[{item:"交易方式",on:0},{item:"退货政策",on:0},{item:"意见反馈",on:0}],
            userList:[{item:"移动客服",on:0},{item:"联通客服",on:0},{item:"电信客服",on:0}],
            orderOn:0,
            login_if:false,
            login_num:1,
            tipsMsg:"提示信息",
            tipsIf:false,
            errorTop:0,
        },
        methods:{

            //点击头部显示
            headClick:function(field){
                this.navBtn(field,0)
            },
            //菜单栏目切换
            navBtn:function (feild,i) {
                this.aboutList.forEach(function(item){item.on=0});
                this.shopList.forEach(function(item){item.on=0});
                this.serverList.forEach(function(item){item.on=0});
                this.userList.forEach(function(item){item.on=0});
                if(feild=="aboutList"){
                    this.orderOn=0
                }else if(feild=="shopList"){
                    this.orderOn=1;
                }else if(feild=="serverList"){
                    this.orderOn=2
                }else if(feild=="userList"){
                    this.orderOn=3
                }
                this[feild][i].on=1;
            },
            //登陆弹窗
            loginMsgPop:function(data){ this.login_if=true,this.login_num=data;},
            login_close:function(data){this.login_if=data},
            //提示子组件错误信息
            son_tip:function (data) {this.tips_show(data.msg)},
            //提示错误信息
            tips_show:function (msg) {
                this.tipsMsg=msg;this.tipsIf=true;
                var that = this;that.errorTop=-40;
                var msgInter=setInterval(function () {
                    that.errorTop=that.errorTop<0?(that.errorTop+2):0;
                    if(that.errorTop>0){clearInterval(msgInter)}
                },10)
                setTimeout(function () {that.tipsIf=false;},2000)
            },
        },
        created:function () {
            //this.
            var type=urlParams().type;
            if(type){
                var subType=parseInt(type%3);
                subType=subType==0?2:subType-1;;
                var oType=type;
                type=parseInt(type/3);
                 if(subType==2&&oType>2){type=type-1};
                var field=""
                if(type==0){field="aboutList"}else if(type==1){field="shopList"}
                    else if(type==2){  field="serverList"}else if(type==3){field="userList"}
                this.navBtn(field,subType);
            }
        },
        mounted:function () {

        }
    })
</script>
</body>
</html>